<template>
    <div>
        <el-button @click="delAll" style="margin-bottom:10px">批量删除</el-button>
        <el-table :data="packData" border style="width: 100%" ref="multipleTable"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="PackingId" label="包装编号" width="120">
            </el-table-column>
            <el-table-column prop="PackingName" label="包装名称" width="120">
            </el-table-column>
            <el-table-column prop="PackingPrice" label="包装价格" width="120">
            </el-table-column>
            <el-table-column label="操作" width="180">
                <template slot-scope="scope">
                    <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 删除提示框 -->
        <!-- <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
            <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delVisible = false">取 消</el-button>
                <el-button type="primary" @click="deleteRow">确 定</el-button>
            </span>
        </el-dialog> -->
    </div>
</template>

<script>
export default {
  data () {
    return {
      packData: [
        {
          PackingId: 1,
          PackingName: '执法仪',
          PackingPrice: 10
        },
        {
          PackingId: 2,
          PackingName: '执法仪',
          PackingPrice: 20
        },
        {
          PackingId: 3,
          PackingName: '执法仪',
          PackingPrice: 30
        },
        {
          PackingId: 4,
          PackingName: '执法仪',
          PackingPrice: 40
        },
        {
          PackingId: 5,
          PackingName: '执法仪',
          PackingPrice: 50
        }
      ],
      delVisible: false, // 删除提示弹框的状态
      msg: '', // 记录每一条的信息，便于取id
      delarr: [], // 存放删除的数据
      multipleSelection: []// 多选的数据// 选中的值显示
    }
  },
  methods: {
    // 单行删除
    handleDelete (index, row) {
      this.idx = index
      this.msg = row// 每一条数据的记录
      this.delarr.push(this.msg.PackingId)// 把单行删除的每条数据的id添加进放删除数据的数组
      this.delVisible = true
    },
    // 批量删除
    delAll () {
      this.delVisible = true// 显示删除弹框
      const length = this.multipleSelection.length
      for (let i = 0; i < length; i++) {
        this.delarr.push(this.multipleSelection[i].PackingId)
      }
    },
    // 操作多选
    handleSelectionChange (val) {
      this.multipleSelection = val
    }
  }
}
</script>

<style lang="">
</style>
